<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div id="app"></div>
    <script type="module">
      import {
        defineAsyncComponent,
        getCurrentInstance,
        onMounted,
        onUpdated,
        onUnmounted,
        reactive,
        toRefs,
        Text,
        createVNode,
        h,
        render,
        Fragment,
        computed,
      } from "../js/runtime-dom/index.js";

      // import {
      //   defineAsyncComponent,
      //   onMounted,
      //   onUpdated,
      //   onUnmounted,
      //   Text,
      //   Fragment,
      //   createVNode,
      //   render,
      //   h,
      //   proxyRefs,
      //   toRefs,
      //   reactive,
      //   effect,
      //   watch,
      //   watchEffect,
      //   computed,
      //   ref,
      //   toRef,
      //   createRenderer,
      // } from "../js/vue.esm-browser.prod.js";

      // let myComponent = defineAsyncComponent(() => {
      //   // return import("./asyncComponent.js");
      //   return new Promise((resolve, reject) => {
      //     setTimeout(() => {
      //       resolve({
      //         render: () => h("div", "hello"),
      //       });
      //     }, 1000);
      //   });
      // });

      let index = 0;
      let myComponent = defineAsyncComponent({
        loader: () => {
          return new Promise((resolve, reject) => {
            setTimeout(() => {
              if (++index === 5) {
                resolve({
                  render: () => h("div", "hello"),
                });
              } else {
                reject({});
              }
            }, 1000);
          });
        },
        timeout: 200,
        errorComponent: {
          render: () => h("div", "error"),
        },
        delay: 200,
        loadingComponent: {
          render: () => h("div", "loading..."),
        },
        onError(err, retry, fail, attempts) {
          if (attempts == 3) {
            return fail();
          }
          retry();
          console.log(err);
        },
      });

      render(h(myComponent), app);
    </script>
  </body>
</html>
